<script setup>

</script>

<template>
  <div class="all">
    <div class="about">
      <h1>关于我们</h1>
      <div class="people-item">
        <p>本站是软件技术1班周昶旭团队开发的测试平台</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/master/">点击进入masket仓库</a>
      </div>
    </div>
    <div>
      <h2>参与人员：</h2>
      <div class="people-item">
        <p>组长：周昶旭(后端基于node.js服务器构建以及提问页面的完善),码云用户名:huangxin6</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/master/">点击进入码云仓库</a>
      </div>
      <div class="people-item">
        <p>组员：黄金耀(调用api接口完善学习广场和我的课程页面),码云用户名:emperor-yaotian</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/branchyao/">点击进入码云仓库</a>
      </div>
      <div class="people-item">
        <p>组员：廖泽深(请求api功能及调用api接口完善课程主页),码云用户名:liaozes</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/lzs/">点击进入码云仓库</a>
      </div>
      <div class="people-item">
        <p>组员：麦梓健(调用api接口完善课程详情的通用化),码云用户名:dsahfguidashguifahniuo</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/czk/">点击进入码云仓库</a>
      </div>
      <div class="people-item">
        <p>组员：麦伟豪(后端基于node.js服务器构建以及登录注册数据存入服务器的功能完善),码云用户名:wangshi23</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/main/">点击进入码云仓库</a>
      </div>
      <div class="people-item">
        <p>组员：陈子锟(调用api接口完善课程详情的通用化),码云用户名:morning-and-dusk-meridian</p>
        <a target="_blank" href="https://gitee.com/huangxin6/finalgroupwork/tree/czk/">点击进入码云仓库</a>
      </div>


    </div>
    <div class="a-href">
      <a target="_blank"
        href="https://www.bilibili.com/video/BV1ab42187Gn/?spm_id_from=333.999.list.card_archive.click&vd_source=a2af8f77e8ac62f918f1b20606af45fb">讲解视频请点击我</a>
    </div>

    <div class="footer">
      <div>
        <span>企业服务</span>
        <span style="color:rgb(245, 130, 222);">关于我们</span>
        <span>联系我们</span>
        <span>帮助中心</span>
        <span>意见反馈</span>
      </div>
      <p>&copy;2024 wang.club 版权所有 粤ICP备20054546号-1</p>
    </div>
  </div>

</template>

<style scoped>
  .all {
    margin: auto 20px;
    width: 100%;
    height: 100vh;
    /* 使用 viewport height 单位来确保它占据整个视口 */
    position: relative;
    /* 为了让 .footer 相对于这个元素定位 */
  }

  .a-href {
    margin-top: 70px;
    font-size: 3rem;
  }

  .people-item {
    display: flex;
  }

  .people-item p {
    margin: 12px 0;
    flex: 0 0 60%;
  }

  .people-item a {
    margin: 12px 0;
    flex: 1;
  }

  h1 {
    color: rgb(245, 130, 222);
    text-shadow: 2px 2px 4px #6987d4;
    font-family: 'Microsoft Sans Serif', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 40px;
  }

  h2 {
    color: #597edcc8;
  }

  p {
    color: #072673;
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    /* 改为小写 px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    /* 改为小写 px */
    color: #999;
    background-color: #847f7f4b;
  }

  .footer p {
    width: 100%;
    text-align: center;
    /* 居中显示文本 */
    margin-top: 2%;
    color: #8d8787;
  }

  .footer div {
    width: 100%;
  }

  .footer span {
    color: #828384;
    font-size: larger;
    margin-left: 5%;
    margin-top: 5%;
    cursor: pointer;
  }
</style>